<template>
	<view class="details_item bg_color">
		<view class="tit">
			<view class="text">地址信息</view>
		</view>
		<Details :detalisData="detalisData" :detalisList="detalisList">
			<template #data="{ data }">
				<view class="font28" style="color: #222222">
					{{ data.field == 'administrativeRegion' ? list1.find((item) => item.value == data.data).name : list2.find((item) => item.value == data.data).name }}
				</view>
			</template>
		</Details>
		<view class="btn_detalis btn_zuhe">
			<view class="enit btn_blue" @click="() => edit(detalisData.id)">编辑</view>
			<view class="delete" @click="(deleteShow = true), (deleteId = detalisData.id)">
				<up-icon size="48rpx" :name="config.getImage('delete_hei')"></up-icon>
			</view>
		</view>
	</view>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
	<DeleteState v-if="isDelete" :success="success1" @successReturn="fanhui" @failReturn="isDelete = false"></DeleteState>
</template>
<script setup>
import config from '@/config.js';
import Details from 'com/Details.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import { useDetails } from 'hooks';
const list1 = ref([]);
const list2 = ref([]);
const init = async (currentPage) => {
	const res1 = await store1.getDict({ code: 'administrative_region' });
	list1.value = res1;
	const res2 = await store1.getDict({ code: 'urban_type' });
	list2.value = res2;
	const res = await api.queryById('baseAddress', currentPage.options);
	detalisData.value = res;
};
const { api, fanhui, edit, store1 } = useDetails(init, 'address')
const deleteShow = ref(false);
const deleteId = ref('');
const confirm = async () => {
	deleteShow.value = false;
	const res = await api.deleteData('baseAddress', { id: deleteId.value });
	isDelete.value = true;
	success1.value = res;
};
const success1 = ref(false);
const isDelete = ref(false);
const detalisData = ref({
	province: '',
	administrativeRegion: '',
	place: '',
	elementName: '',
	responsibilityCode: '',
	communityVillage: '',
	addressCode: '',
	urbanRural: '',
	belongingBuildings: '',
	communityGrid: ''
});
const detalisList = [
	{
		label: '所在地区',
		field: 'province'
	},
	{
		label: '类行政区域',
		field: 'administrativeRegion',
		slot: true
	},
	{
		label: '区划内详细地址',
		field: 'place'
	},
	{
		label: '地址元素名称',
		field: 'elementName'
	},
	{
		label: '警务责任区代码',
		field: 'responsibilityCode'
	},
	{
		label: '所属社区/居(村)委会',
		field: 'communityVillage'
	},
	{
		label: '地址编码',
		field: 'addressCode'
	},
	{
		label: '城乡分类',
		field: 'urbanRural',
		slot: true
	},
	{
		label: '所属建筑物',
		field: 'belongingBuildings'
	},
	{
		label: '所属社区(警务)网格',
		field: 'communityGrid'
	}
];
</script>

<style lang="scss" scoped></style>
